<template>
  <div class="table-box">
    <ProTable
      ref="proTableRef"
      title="DTU FTP信息表"
      :indent="20"
      :columns="columns"
      :search-columns="searchColumns"
      :request-api="getTableList"
      row-key="id"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader="scope">
        <el-button type="primary" :icon="Refresh" @click="proTableRef?.getTableList()">
          刷新
        </el-button>
      </template>
      <template #operation="{ row }">
        <el-button
          type="primary"
          link
          :icon="EditPen"
          @click="openEdit('编辑DTU FTP信息', row)"
        >
          编辑
        </el-button>
        <el-button 
          type="primary" 
          link 
          :icon="Delete"
          @click="deleteInfo(row)"
        >
          删除
        </el-button>
      </template>
    </ProTable>
    <DtuFtpInfoForm ref="dtuFtpInfoRef" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Refresh, EditPen, Delete } from '@element-plus/icons-vue';
import ProTable from '@/components/ProTable/index.vue';
import { getDtuFtpInfoListApi, updateDtuFtpInfoApi, removeDtuFtpInfoApi } from '@/api/modules/dtuinfo/dtuFtpInfo';
import { useHandleData } from '@/hooks/useHandleData';
import DtuFtpInfoForm from './components/DtuFtpInfoForm.vue';
import type { ColumnProps, ProTableInstance, SearchProps } from '@/components/ProTable/interface';
import type { DtuFtpInfoQuery, DtuFtpInfoRow } from '@/api/types/dtuinfo/dtuFtpInfo';

defineOptions({
  name: 'DtuFtpInfoView'
});

const proTableRef = ref<ProTableInstance>();
const dtuFtpInfoRef = ref<InstanceType<typeof DtuFtpInfoForm>>();

// 表格配置项
const columns: ColumnProps<DtuFtpInfoRow>[] = [
  { type: 'selection', width: 80 },
  { prop: 'id', label: 'ID', width: 80 },
  { prop: 'deviceId', label: '设备ID' },
  // { prop: 'remoteIp', label: '远程IP' },
  // { prop: 'remotePort', label: '远程端口' },
  // { prop: 'channelId', label: '通道ID' },
  // { prop: 'serverChannelId', label: '服务端通道ID' },
  // { 
  //   prop: 'status', 
  //   label: '状态',
  //   tag: true,
  //   enum: [
  //     { label: '已连接', value: 1, tagType: 'success' },
  //     { label: '未连接', value: 0, tagType: 'danger' }
  //   ]
  // },
  // { prop: 'connectTime', label: '连接时间' },
  // { prop: 'disconnectTime', label: '断开时间' },
  { prop: 'createTime', label: '创建时间' },
  // { prop: 'updateTime', label: '更新时间' },
  { prop: 'vehicleNumber', label: '车辆编号' },
  { prop: 'iccid', label: 'ICCID' },
  { prop: 'simNumber', label: 'SIM卡号' }, // 新增字段
  { prop: 'ledid', label: 'LEDID' },
  { prop: 'expireTime', label: '过期时间' },
  // 新增字段 (根据API示例调整字段名)
  { prop: 'capacity', label: '容量' },
  // { prop: 'tspeed', label: '起始最低速度(km/h)' },
  // { prop: 'ttimeZone', label: '起始振动时间区域(s)' },
  // { prop: 'ttimes', label: '震动次数' },
  // { prop: 'tradarDistance', label: '终点雷达距离(mm)' },
  // { prop: 'tradarTime', label: '终点雷达时间区域(s)' },
  // { prop: 'tseMinDistance', label: '起点终点有效里程(m)' },
  // { prop: 'tseMinTime', label: '起点终点有效运输时长(s)' },
  // { prop: 'tseTransportDistance', label: '起点终点有效运输里程(m)' },
  { prop: 'tesMinDistance', label: '终点到新起点长度' }, // 新增字段
  { prop: 'operation', label: '操作', width: 160, fixed: 'right' }
];

// 搜索条件项
const searchColumns: SearchProps[] = [
  { prop: 'deviceId', label: '设备ID', el: 'input' },
  // { prop: 'remoteIp', label: '远程IP', el: 'input' },
  // { prop: 'channelId', label: '通道ID', el: 'input' },
  // { 
  //   prop: 'status', 
  //   label: '状态', 
  //   el: 'select',
  //   enum: [
  //     { label: '已连接', value: 1 },
  //     { label: '未连接', value: 0 }
  //   ]
  // }
];

// 获取table列表
const getTableList = (params: DtuFtpInfoQuery) => {
  return getDtuFtpInfoListApi(params);
};

// 打开编辑弹窗
const openEdit = (title: string, row: any = {}) => {
  const params = {
    title,
    row: { ...row },
    api: updateDtuFtpInfoApi,
    getTableList: proTableRef.value?.getTableList
  };
  dtuFtpInfoRef.value?.acceptParams(params);
};

// 删除信息
const deleteInfo = async (params: DtuFtpInfoRow) => {
  await useHandleData(removeDtuFtpInfoApi, { ids: [params.id.toString()] }, `删除【${params.id}】DTU FTP信息`);
  proTableRef.value?.getTableList();
};
</script>